<template>
    <div>
        <el-container>
            <el-main>
                <router-view></router-view>
            </el-main>
            <el-footer>
                <div @mouseenter="setting.footerShow=true" @mouseleave="setting.footerShow=false"
                     style="height: 100%;">
                    <transition name="el-zoom-in-center">
                        <el-menu class="footer-menu" v-show="setting.footerShow" :default-active="defaultActive"
                                 mode="horizontal"
                                 router="true" active-text-color="#eb9e05">
                            <el-menu-item index="home">
                                <i class="el-icon-edit"></i>
                                <span slot="title">签到</span>
                            </el-menu-item>
                            <el-menu-item index="lottery">
                                <i class="el-icon-news"></i>
                                <span slot="title">抽奖</span>
                            </el-menu-item>
                            <el-menu-item index="turntable">
                                <i class="el-icon-loading"></i>
                                <span slot="title">大转盘</span>
                            </el-menu-item>
                            <div style="position: absolute;top: 10px;right: 20px;">
                                <el-button v-show="$store.state.btnShow.lotteryBtn"
                                           type="warning" :disabled="$store.state.lottery.index===0"
                                           @click="lotteryBtnPrev">
                                    上一项
                                </el-button>
                                <el-button v-show="$store.state.btnShow.lotteryBtn"
                                           type="warning"
                                           :disabled="$store.state.lottery.index === $store.state.lottery.prizeList.length - 1"
                                           @click="lotteryBtnNext">
                                    下一项
                                </el-button>
                                <el-button v-show="$store.state.btnShow.turntableResultBtn" type="warning"
                                           @click="turntbaleResult">
                                    查看获奖名单
                                </el-button>
                                <el-button type="warning" :icon="setting.btnIcon" @click="fullScreen">
                                    {{setting.fullScreenBtnText}}
                                </el-button>
                            </div>
                        </el-menu>

                    </transition>
                </div>
            </el-footer>

        </el-container>
    </div>
</template>

<script>
    export default {
        mounted: function () {
            this.defaultActive = this.$route.path.split('/')[1]
        },
        data() {
            return {
                defaultActive: 'home',
                setting: {
                    footerShow: false,
                    btnIcon: 'el-icon-rank',
                    fullScreenBtnText: '全屏显示',
                    isFullScreen: false
                },
                turntableInfo: {
                    wheelId: '',
                    goId: '',
                    activity: 'wheel',
                }
            }
        },
        methods: {
            // 全屏
            fullScreen() {
                if (this.setting.isFullScreen) {
                    // 退出全屏
                    if (document.exitFullscreen) {
                        document.exitFullscreen()
                    }
                    else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                    }
                    else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen()
                    }
                    else if (document.msExitFullscreen) {
                        document.msExitFullscreen()
                    }
                    // 退出全屏后改变按钮状态
                    this.setting.btnIcon = 'el-icon-rank'
                    this.setting.fullScreenBtnText = '全屏显示'
                    this.setting.isFullScreen = false
                } else {
                    // 开启全屏
                    const el = document.documentElement
                    const rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen
                    if (typeof rfs != "undefined" && rfs) {
                        rfs.call(el)
                    } else if (typeof window.ActiveXObject != "undefined") {
                        var wscript = new ActiveXObject("WScript.Shell")
                        if (wscript != null) {
                            wscript.SendKeys("{F11}")
                        }
                    }
                    // 全屏后改变按钮状态
                    this.setting.btnIcon = 'el-icon-plus'
                    this.setting.fullScreenBtnText = '退出全屏'
                    this.setting.isFullScreen = true
                }
            },
            // 查看获奖名单
            turntbaleResult() {
                // 获取中奖名单
                this.$http.get('/api/wheels').then(response => {
                    const id = response.data.wheels[0].id
                    this.$http.get('/api/wheel/show/' + id).then(response => {
                        this.turntableInfo.wheelId = response.data.wheel.id
                        this.turntableInfo.goId = response.data.wheel.wheel_gos[0].id
                        this.$http.get('/api/winUsers', {
                            params: {
                                activity_id: this.turntableInfo.wheelId,
                                go_id: this.turntableInfo.goId,
                                activity: this.turntableInfo.activity
                            }
                        }).then(response => {
                            console.log(response.data.users)
                            this.$store.commit('storageTurntableResultList', response.data.users)
                            this.$store.commit('storageTurntableResultShow', true)
                        }, response => {

                        })
                    }, response => {
                        console.log(response)
                    })
                }, response => {
                    console.log(response)
                })
            },
            // 抽奖查看上一项
            lotteryBtnPrev() {
                this.$store.commit('storageLotteryWho', ['http://test3.chenxinliuyi.com/pc/images/who.png', ''])
                this.$store.state.lottery.index--
            },
            // 抽奖查看下一项
            lotteryBtnNext() {
                this.$store.commit('storageLotteryWho', ['http://test3.chenxinliuyi.com/pc/images/who.png', ''])
                this.$store.state.lottery.index++
            }
        }
    }
</script>

<style>
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
    }

    .el-container {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

    .el-button .el-icon-rank, .el-button .el-icon-plus {
        color: #fff !important;
    }

    .el-main {
        padding: 0;
        height: 100%;
        overflow: hidden;
    }

    .el-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .footer-menu {
        padding: 0 1.5rem;
        border-radius: .5rem .5rem 0 0;
        background: rgba(0, 0, 0, 0.6);
        overflow: hidden;
    }
</style>
